<template>
	<view>
		<!-- 顶部 -->
		<view class="custom_navigation">
			<view class="status_bar"></view>
			<view class="navigation_bar">智助教育</view>
		</view>
		<!-- 内容模块 -->
		<view class="cont" :style="{'margin-top':contHeight}">
			<view class="head-search">
				<input type="text" @input="checkInput" :class="noIcon == true ? '' : 'search-input'" confirm-type="搜索" placeholder="搜索商品"
				 placeholder-style="color:#999999" @confirm="headSearch" />
			</view>
			<!-- banner图 -->
			<swiper class="banner-content" indicator-dots="true" circular="true" autoplay="true" interval="3000">
				<swiper-item v-for="v in 5">{{v}}</swiper-item>
			</swiper>
			<!-- 优惠券 -->
			<view class="discount-content" v-show="coupon?true:false">
				<view class="discount-content-item">
					<discount-coupon :itemCont="coupon" @event="getDiscount"></discount-coupon>
				</view>
			</view>
			<!-- 分类导航 -->
			<swiper class="type-menu" indicator-dots="true">
				<swiper-item v-for="v in 2">
					<view class="menu-item" v-for="v in 2">
						<view>
							<image src="" mode="aspectFill"></image>
							<view>签到有礼</view>
						</view>
						<view>
							<image src="" mode="aspectFill"></image>
							<view>品质拼团</view>
						</view>
						<view>
							<image src="" mode="aspectFill"></image>
							<view>限时秒杀</view>
						</view>
						<view>
							<image src="" mode="aspectFill"></image>
							<view>领福利</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 活动中心 -->
			<view class="active-center-content">
				<view class="day-day-buy">
					<view class="title">天天惠买单</view>
					<view class="s-title">专属你的优惠向导</view>
				</view>
				<view class="other">
					<view class="stay-home">
						<view class="title">天天惠买单</view>
						<view class="s-title">专属你的优惠向导</view>
					</view>
					<view class="score-active">
						<view class="title">天天惠买单</view>
						<view class="s-title">专属你的优惠向导</view>
					</view>
				</view>
			</view>
			<!-- 超值拼团 -->
			<view class="group-boking">
				<view class="title-content">
					<view class="title">超值拼团</view>
					<view class="more" @tap="goGroupBoking">更多</view>
					<view class="iconfont iconright" @tap="goGroupBoking"></view>
				</view>
				<view class="shop-content">
					<small-commodity @event="handelGroupBoking(item.unid,item.price)" :src="item.mainImg" :price="item.price" :oldPrice="item.original_price" v-if="GroupGoods.length!=0" v-for="(item,index) in GroupGoods" :id="item.unid"></small-commodity>
				</view>
			</view>
			<!-- 限时秒杀 -->
			<view class="time-kill-content">
				<view class="title-content">
					<view class="title">限时秒杀</view>
					<view class="time-kill">
						<view class="tcontent">{{killDay}}</view>
						<view>天</view>
						<view class="tcontent">{{killHour}}</view>
						<view>时</view>
						<view class="tcontent">{{killMinute}}</view>
						<view>分</view>
						<view class="tcontent">{{killSecond}}</view>
						<view>秒</view>
					</view>
					<view class="more" @tap="goTimeKill">更多</view>
					<view class="iconfont iconright" @tap="goTimeKill"></view>
				</view>
				<view class="shop-content">
					<small-commodity @event="handelTimeKill(item.unid,item.price)" :src="item.mainImg" :price="item.price" :oldPrice="item.original_price" v-if="TimeGoods.length!=0" v-for="(item,index) in TimeGoods" :id="item.unid"></small-commodity>
				</view>
			</view>
			<!-- 为你推荐 -->
			<view class="recommend-content">
				<view class="title">为你推荐</view>
				<view class="recommend">
					<price-commodity @event="handelPriceCommodity(item.unid,item.price)" class="item" v-if="RecommendGoods.length!=0" v-for="(item,index) in RecommendGoods" :id="item.unid" :src="item.mainImg" :price="item.price" :change="item.sales"
					 :describe="item.goods_name"></price-commodity>
				</view>
			</view>
		</view>
		<floating-ball @event="handelFloatBall"></floating-ball>
	</view>
</template>

<script>
	import smallCommodity from '../../components/commodityShow/small-commodity.vue';
	import priceCommodity from '../../components/commodityShow/price-commodity.vue';
	import discountCoupon from '../../components/discount-coupon/discount-coupon.vue';
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue';
	import util from "@/common/util.js";
	export default {
		components: {
			smallCommodity,
			priceCommodity,
			discountCoupon,
			floatingBall
		},
		data() {
			return {
				contHeight: this.util.getHeight(), //内容模块距顶部的高度
				killDay: '', //倒计时天
				killHour: '', //倒计时时
				killMinute: '', //倒计时分
				killSecond: '', //倒计时秒
				killInterval: '', //倒计时定时器
				noIcon: false,
				coupon: {}, //优惠券详情
				GroupGoods:[], //拼团商品
				TimeGoods:[], //限时商品
				RecommendGoods:[], //推荐商品
			}
		},
		created() {
			this.killTime()
			this.getCoupon()
			this.valueForMoney()
		},
		methods: {
			// 获取优惠券列表
			getCoupon() {
				this.$shopApi.apiPost('font/coupon/index').then(res => {
					console.log('优惠券',res);
					if (res.data.code == 200) {
						var item = res.data.data;
						item['state'] = 0;
						var myReceive = Number(item.quota - item.myreceive); //优惠券剩余领取次数
						if (myReceive <= 0) {
							item['state'] = -1;
						}
						item['stateName'] = this.util.couponState(item.state);
						item['number'] = Number(item.total - item.receive); //优惠券剩余数量
						item.startTime = item.start_time.substring(0, 10).replace(/-/g, '.');
						item.stopTime = item.stop_time.substring(0, 10).replace(/-/g, '.');
						this.coupon = item;
						console.log('coupon',this.coupon);
					}
				})
			},
			// 领取优惠券
			getDiscount(e) {
				if (this.coupon.state == -1) {
					this.util.showDialog('你已达到领取上限,看看其它吧~');
				} else {
					this.$shopApi.apiPost('font/coupon/get', {unid: e.unid}).then(res => {
						this.util.showDialog(res.data.message);
						if (res.data.code == 200) {
							this.coupon.myreceive++; //个人领取优惠券次数加1
							this.coupon.receive++; //整体优惠券被领取次数加1
							this.coupon['number'] = Number(this.coupon.total - this.coupon.receive); //优惠券剩余数量
							var myReceive = Number(this.coupon.quota - this.coupon.myreceive); //优惠券剩余领取次数
							if (myReceive <= 0) {
								this.coupon['state'] = -1;
							}
							this.$forceUpdate();
						}
					})
				}
			},
			// 倒计时
			killTime(timeSet) {
				if (this.killInterval) {
					clearInterval(this.killInterval)
				}
				this.killInterval = setInterval(() => {
					let day = new Date('2021-02-25 13:40:50')
					let time = day.getTime() - new Date().getTime()
					this.killDay = parseInt(time / (1000 * 60 * 60 * 24)),
						this.killHour = parseInt(time % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)),
						this.killMinute = parseInt(time % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60)),
						this.killSecond = parseInt(time % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / (1000))
				}, 1000)
			},
			// 头部搜索栏
			headSearch(e) {
				let val = e.detail.value
				this.$interface.routeLink({
					route: 'searchCommodity',
					data: {
						value: val
					}
				})
			},
			// 点击拼团商品
			handelGroupBoking(unid,price) {
				this.$interface.routeLink({
					route: 'teamDetail',
					data: {
						id: unid,
						price: price
					}
				})
			},
			// 拼团、限时、推荐商品
			valueForMoney(){
				for (let i = 1; i <= 3; i++) {
					let resData = {
						activities:i
					}
					this.$shopApi.apiPost('font/goods/infos').then(res => {
						const DATA = res.data
						if(DATA.code == 200){
							//推荐商品主图
							if(DATA.data.list!=undefined){
								for (var i = 0; i < DATA.data.list.length; i++) {
									if(DATA.data.list[i].images.length!=0){
										DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
									}else{
										DATA.data.list[i].mainImg = this.defimg
									}
								}
								if(resData.activities == 1){
									this.RecommendGoods = DATA.data.list
									console.log('推荐商品',this.RecommendGoods);
								}else if(resData.activities == 2){
									this.TimeGoods = DATA.data.list.slice(0,4)
									console.log('限时商品',this.TimeGoods);
								}else if(resData.activities == 3){
									this.GroupGoods = DATA.data.list.slice(0,4)
									console.log('拼团商品',this.GroupGoods);
								}
							}
						}
					})
				}
			},
			// 点击限时秒杀商品
			handelTimeKill(unid,price) {
				this.$interface.routeLink({
					route: 'killDetail',
					data: {
						id: unid,
						price: price
					}
				})
			},
			// 点击推荐商品
			handelPriceCommodity(unid,price) {
				this.$interface.routeLink({
					route: 'commonDetail',
					data: {
						id: unid,
						price: price
					}
				})
			},
			// 搜索框输入检查是否需要隐藏搜索图标
			checkInput(e) {
				this.noIcon = e.detail.value ? true : false
			},
			// 更多限时秒杀商品
			goTimeKill() {
				this.$interface.routeLink({
					route: 'timeKill'
				})
			},
			// 更多拼团商品
			goGroupBoking() {
				this.$interface.routeLink({
					route: 'groupBoking'
				})
			},
			// 悬浮球菜单
			handelFloatBall(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 100upx;
	}

	.custom_navigation {
		background-color: #A72024;
	}

	.head-search {
		width: 100%;
		padding: 30upx;
		padding-top: 20upx;
		background-color: #A72024;
		box-sizing: border-box;
		position: relative;

		input {
			position: relative;
			width: 690upx;
			height: 70upx;
			line-height: 70upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 5px;
			text-align: center;
		}

		.search-input:before {
			content: '\e61f';
			font-family: 'iconfont' !important;
			position: absolute;
			left: 232upx;
			font-size: 42upx;
			color: #999999;
		}
	}

	// 轮播图
	.banner-content {
		width: 100%;
		height: 320upx;
		background-color: #FFFFFF;
	}

	// 优惠券
	.discount-content {
		width: 100%;
		height: 160upx;
		margin: 10upx auto;
		padding: 20upx 0;
		background-color: #FFFFFF;
	}
	.discount-content-item{
		width: 660upx;
		position: absolute;
		left: 45upx;
	}

	// 分类导航
	.type-menu {
		width: 100%;
		height: 390upx;
		background-color: #FFFFFF;
		margin-top: 12upx;
		padding-top: 40upx;
		box-sizing: border-box;

		/deep/ .uni-swiper-dot {
			width: 40upx;
			height: 2upx;
		}

		swiper-item {
			.menu-item {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				view {
					width: 110upx;
					text-align: center;
					box-sizing: border-box;

					image {
						width: 100upx;
						height: 100upx;
						margin: auto;
						background-color: #F5F3F4;
						border-radius: 10upx;
					}

					view {
						width: 100%;
						font-size: 12px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 18px;
						color: #333333;
						opacity: 1;
					}
				}

			}

			.menu-item:last-child {
				margin-top: 20upx;
			}
		}
	}

	// 活动中心
	.active-center-content {
		width: calc(100% - 60upx);
		height: 332upx;
		margin: auto;
		margin-top: 10upx;
		box-sizing: border-box;
		display: flex;

		.title {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 40upx;
			color: #333333;
			opacity: 1;
		}

		.s-title {
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 36upx;
			color: #999999;
			opacity: 1;
		}

		.day-day-buy {
			flex: 1;
			height: 332upx;
			background-color: #FFFFFF;
			padding: 30upx;
			box-sizing: border-box;
		}

		.other {
			flex: 1;
			padding-left: 2upx;
			box-sizing: border-box;

			.stay-home {
				width: 100%;
				height: 166upx;
				background-color: #FFFFFF;
				padding: 30upx 20upx;
				box-sizing: border-box;
			}

			.score-active {
				margin-top: 2upx;
				width: 100%;
				height: 164upx;
				background-color: #FFFFFF;
				padding: 30upx 20upx;
				box-sizing: border-box;

				.title {
					margin-top: 20upx;
				}
			}
		}
	}

	// 超值拼团、限时秒杀
	.group-boking,
	.time-kill-content {
		width: calc(100% - 60upx);
		margin: auto;
		margin-top: 10upx;
		background-color: #FFFFFF;
		padding: 20upx;
		padding-bottom: 0;
		box-sizing: border-box;

		.title-content {
			display: flex;
			line-height: 48upx;

			.title {

				font-size: 16px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 24px;
				color: #333333;
				opacity: 1;
			}

			.time-kill {
				margin-left: auto;
				display: flex;
				font-size: 24upx;
				color: #EDBF62;

				view {
					margin-top: 9upx;
					width: 32upx;
					height: 32upx;
					font-size: 24upx;
					line-height: 32upx;
					margin-left: 10upx;
					text-align: center;
					border-radius: 4upx;
				}

				.tcontent {
					color: #FFFFFF;
					background-color: #EDBF62;
				}
			}

			.more {
				margin-left: auto;
				margin-right: 10upx;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 20px;
				color: #999999;
				opacity: 1;
			}

			.iconright {

				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 20px;
				color: #999999;
				opacity: 1;
			}
		}

		.shop-content {
			margin-top: 20upx;
			display: flex;
			justify-content: flex-start;
		}
	}

	// 限时秒杀


	// 为你推荐
	.recommend-content {
		width: calc(100% - 60upx);
		margin: auto;

		.title {
			width: 100%;
			text-align: center;
			margin: 40upx 0;
			font-size: 18px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			line-height: 27px;
			color: #333333;
			opacity: 1;
		}

		.recommend {
			display: flex;
			justify-content: space-between;
			width: 100%;
			flex-wrap: wrap;

			.item {
				width: calc(50% - 9upx);
			}
		}
	}
</style>
